import DragTest from '@components/DragTest/DragTest';
import ReactComponentTs from '@components/ReactComponentTs/ReactComponentTs';
import globalStore from '@globalStore';
import ReactMixinComponent from '@ReactMixinComponent';
import React from 'react';
import styles from './home.less';
interface Iprops { }

interface Istate {
    zoom: number,
    unZoom: number,
    isDev: boolean
}

export default class Home extends ReactMixinComponent<Iprops, Istate> {
    constructor(props: Iprops) {
        super(props);
    }

    state = {
        zoom: globalStore.zoom,
        unZoom: globalStore.unZoom,
        isDev: globalStore.isDev
    }

    componentDidMount() {
        this.mixin_autorun(() => {
            const { zoom, unZoom, isDev } = globalStore;
            this.setState({ zoom, unZoom, isDev });
        });

    }

    componentWillUnmount() { }

    render() {

        const { zoom, unZoom, isDev } = this.state;

        return (
            <div className={styles.home}>

                <p>尝试改变浏览器宽度来查看 globalStore.zoom 值的变化</p>

                <p>globalStore.zoom {zoom}</p>
                <p>globalStore.unZoom {unZoom}</p>

                <p>
                    globalStore.zoom  是全局显示比例
                    页面只考虑最小宽度1200px来开发, 当小于1200px时 这个比例就会变小
                    将他应用在body上面可以等比缩放整个页面
                    <br /> 注意文字只会缩放到视觉上看起来最小12px, 所以 文字也会产生换行
                </p>
                <p>globalStore.unZoom: {unZoom}</p>
                <p>globalStore.unZoom: 这个值是与zoom值成反比 即 unZoom = 1/zoom
                    <br />这个参数的作用在于 有canvas参与时  鼠标获取x,y坐标时产生的同比缩小问题
                    <br /> 用法 {"<canvas style={{zoom: this.mixinContext.store.zoomStore.unZoom}}/>"} 即可解决
                </p>

                <p>开发模式:{isDev}</p>

                <ReactComponentTs />

                <DragTest />
                <DragTest />
            </div>
        );
    }
}

